import { get } from "lodash";
import "./style/resize.css";

const handlerMouseDownEvent = function(e, resizeDom, handler, option = {}) {
  let resizing = false;
  const { minWidth = 0, minHeight = 0, onReachMinWidth, onReachMinHeight } = option;
  const { clientX: originX, clientY: originY } = e;
  const { width: dw, height: dh } = resizeDom.getBoundingClientRect();
  const isMinW = function(val) {
    if (val <= minWidth) {
      onReachMinWidth && onReachMinWidth();
    }
    return val <= minWidth;
  };
  const isMinH = function(val) {
    if (val <= minHeight) {
      onReachMinHeight && onReachMinHeight();
    }
    return val <= minHeight;
  };
  resizeDom.onmousedown = function() {
    resizing = true;
  };
  document.onmousemove = function(e) {
    if (!resizing) return;
    const currentX = e.clientX;
    const currentY = e.clientY;
    // 通过事件委托，计算移动的距离
    const l = currentX - originX; //正右，负左
    const t = currentY - originY; //正下，负上
    //缩放
    switch (handler) {
      case "l": //左边
        if (isMinW(dw - l)) return;
        resizeDom.style.width = `${dw - l}px`;
        break;
      case "r": //右
        if (isMinW(dw + l)) return;
        resizeDom.style.width = `${dw + l}px`;
        break;
      case "t": //上
        if (isMinH(dh - t)) return;
        resizeDom.style.height = `${dh - t}px`;
        break;
      case "b": //下
        if (isMinH(dh + t)) return;
        resizeDom.style.height = `${dh + t}px`;
        break;
      case "lt": //左上
        if (!isMinW(dw - l)) {
          resizeDom.style.width = `${dw - l}px`;
        }
        if (!isMinH(dh - t)) {
          resizeDom.style.height = `${dh - t}px`;
        }
        break;
      case "lb": //左下
        if (!isMinW(dw - l)) {
          resizeDom.style.width = `${dw - l}px`;
        }
        if (!isMinH(dh + t)) {
          resizeDom.style.height = `${dh + t}px`;
        }
        break;
      case "rt": //右上
        if (!isMinW(dw + l)) {
          resizeDom.style.width = `${dw + l}px`;
        }
        if (!isMinH(dh - t)) {
          resizeDom.style.height = `${dh - t}px`;
        }
        break;
      case "rb": //右下
        if (!isMinW(dw + l)) {
          resizeDom.style.width = `${dw + l}px`;
        }
        if (!isMinH(dh + t)) {
          resizeDom.style.height = `${dh + t}px`;
        }
        break;
    }
  };
  document.onmouseup = function() {
    resizing = false;
    document.onmousemove = null;
    document.onmouseup = null;
  };
};
export default {
  mounted(el, binding) {
    const resizeable = get(binding, "value.resizeable", true);
    if (resizeable) {
      const defaultHandler = ["l", "r", "t", "b", "lt", "rt", "lb", "rb"];
      const handler = get(binding, "value.handler", []);
      const handlers = handler.filter(item => {
        return defaultHandler.includes(item);
      });
      function createResizeHandler(handlers) {
        handlers.forEach(item => {
          const handler = document.createElement("div");
          handler.style.zIndex = 1;
          handler.classList.add(`resize-handler_${item}`);
          handler.onmousedown = function(e) {
            handlerMouseDownEvent(e, el, item, binding.value);
          };
          if (!el.style.position) {
            el.style.position = "relative";
          }
          el.appendChild(handler);
        });
      }
      createResizeHandler(handlers);
    }
  }
};
